<!-- 创建时间: 2020年12月23日 星期三 10:33 -->
<template>
    <div class="createCoursesClass_container">
        <el-divider content-position="left">创建考试课程</el-divider>
        <el-card class="box-card">
            <el-form :label-position="labelPosition"
                     label-width="160px"
                     :model="formLabelAlign"
                     :rules="rules"
                     ref="ruleForm">
                <el-form-item label="课程名称"
                              prop="coursesName">
                    <el-input v-model="formLabelAlign.coursesName"
                              clearable></el-input>
                </el-form-item>
                <el-form-item label="班级"
                              prop="selectClass">
                    <el-select v-model="formLabelAlign.selectClass"
                               filterable
                               placeholder="请选择"
                               size="medium">
                        <el-option v-for="item in options"
                                   :key="item.classNumber"
                                   :label="item.className"
                                   :value="item.classNumber">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始/结束日期时间"
                              prop="startEndTime">
                    <div class="block">
                        <el-date-picker v-model="formLabelAlign.startEndTime"
                                        type="datetimerange"
                                        align="right"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        :default-time="[defaultTimeStart, defaultTimeEnd]">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"
                               style="float:left;"
                               round
                               @click="createCoursesClass('ruleForm')">创建</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-button plain
                   @click="openInfoTips"
                   style="display: none"></el-button>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data () {
        //这里存放数据
        return {
            labelPosition: "right", // 表单内label位置
            rules: {
                // 表单验证规则
                coursesName: [{
                    required: true,
                    message: "请输入课程名称",
                    trigger: "blur",
                },
                {
                    min: 2,
                    max: 30,
                    message: "长度在 2 到 30 个字符",
                    trigger: "blur",
                },
                ],
                selectClass: [{
                    required: true,
                    message: "请选择科目所属班级",
                    trigger: "change",
                },],
                startEndTime: [{
                    type: "array",
                    required: true,
                    message: "请选择考试起止时间",
                    trigger: "change",
                },],
            },
            options: [], // 班级选择列表
            formLabelAlign: {
                coursesName: "", // 课程名称
                selectClass: "", // 选择班级
                startEndTime: [],
            },
            defaultTimeStart: "",
            defaultTimeEnd: "",
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
        "formLabelAlign.startEndTime": "monitorStartEndTime",
    },
    //方法集合
    methods: {
        monitorStartEndTime (newval, oldval) {
            let curr = new Date();
            let start = new Date(newval[0]);
            if (start <= curr) {
                this.$message.error("考试开始时间不能小于当前时间");
                this.formLabelAlign.startEndTime.length = 0;
                // 开始时间
                let date = new Date();
                date.setMinutes(date.getMinutes() + 2);
                this.formLabelAlign.startEndTime[0] = date;

                //结束时间
                date = new Date();
                date.setMinutes(date.getMinutes() + 4);
                this.formLabelAlign.startEndTime[1] = date;
            }
        },
        checkformLabelAlign_coursesName () {
            return !isNaN(Number(this.formLabelAlign.coursesName));
        },
        // 创建课程班级
        createCoursesClass (formName) {
            if (this.checkformLabelAlign_coursesName()) {
                this.$message.warning("非法课程名称，请重新输入");
                return;
            }

            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 添加教师创建考试记录 教师姓名，教师工号，班级号，课程名，开始时间，结束时间
                    let obj = {
                        teacherNumber: this.$store.getters.getUserNumber,
                        classNumber: this.formLabelAlign.selectClass,
                        coursesName: this.formLabelAlign.coursesName,
                        startTime: this.dateFormat(
                            "yyyy-mm-dd HH:MM",
                            this.formLabelAlign.startEndTime[0]
                        ),
                        endTime: this.dateFormat(
                            "yyyy-mm-dd HH:MM",
                            this.formLabelAlign.startEndTime[1]
                        ),
                        studentPreview: true,
                    };
                    // 添加学生考试课程
                    this.$http
                        .post("createCoursesClass", {
                            data: JSON.stringify(obj),
                        })
                        .then((res) => {
                            if (res.bodyText == "true") {
                                this.openInfoTips(
                                    "成功",
                                    "课程 " +
                                    this.formLabelAlign.coursesName +
                                    " 创建成功",
                                    "success",
                                    3000
                                );
                                this.$refs[formName].resetFields();
                            } else {
                                this.openInfoTips(
                                    "失败",
                                    "课程 " +
                                    this.formLabelAlign.coursesName +
                                    " 创建失败。" +
                                    res.bodyText,
                                    "error",
                                    0
                                );
                            }
                        });
                } else {
                    return false;
                }
            });
        },
        // 日期时间格式化
        dateFormat (fmt, date) {
            let ret;
            const opt = {
                "y+": date.getFullYear().toString(), // 年
                "m+": (date.getMonth() + 1).toString(), // 月
                "d+": date.getDate().toString(), // 日
                "H+": date.getHours().toString(), // 时
                "M+": date.getMinutes().toString(), // 分
                "S+": date.getSeconds().toString(), // 秒
                // 有其他格式化字符需求可以继续添加，必须转化成字符串
            };
            for (let k in opt) {
                ret = new RegExp("(" + k + ")").exec(fmt);
                if (ret) {
                    fmt = fmt.replace(
                        ret[1],
                        ret[1].length == 1 ?
                            opt[k] :
                            opt[k].padStart(ret[1].length, "0")
                    );
                }
            }
            return fmt;
        },
        openInfoTips (title, message, type, duration) {
            this.$notify({
                title: title,
                message: message,
                type: type,
                duration: duration,
            });
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created () {
        this.$http.get("teacherGetClassList").then((res) => {
            this.options = JSON.parse(res.bodyText);
        });

        let date = new Date();
        date.setMinutes(date.getMinutes() + 2);
        this.defaultTimeStart = this.dateFormat("HH:MM:SS", date);

        date = new Date();
        date.setMinutes(date.getMinutes() + 4);
        this.defaultTimeEnd = this.dateFormat("HH:MM:SS", date);
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted () { },
    //当data中定义的数据有变化时就会加载updated方法
    updated () { },
};
</script>

<style lang="scss" scoped>
//@import url(); 引入公共css类
.createCoursesClass_container {
    button.el-button.el-button--primary.is-round:last-child {
        float: right;
        margin-bottom: 10px;
        padding: 13px 40px;
    }
}
</style>
